<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8"/>
	<title>驴妈妈统计系统</title>
	<meta name="description" content="overview &amp; stats"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<script src="${request.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${request.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${request.contextPath}/assets/js/spin.min.js"></script>
	<!-- ace scripts -->
	<script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${request.contextPath}/assets/js/ace.min.js"></script>
	<!-- validator scripts -->
	<script src="${request.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<!-- user scripts -->
	<script src="${request.contextPath}/assets/js/user/base.js"></script>
	<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css"/>
	<!-- text fonts -->
	<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css"/>
	<!-- BootstrapValidator -->
	<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css"/>
	<!-- ace styles -->
	<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
		  id="main-ace-style"/>
	<!-- ace settings handler -->
	<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
	<link rel="stylesheet" href="${request.contextPath}/assets/css/bsie-paginator.css"/>
	<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.css"/>
	<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
</head>

<body class="no-skin" style="background-color: #FFF;">
<div class="page-content">
	<div class="page-search-area">
		<div class="widget-box">
			<div class="widget-body" style="background-color: #EFF3F8;">
				<div class="widget-main">
					<div class="row">
						<form class="form-inline" id="searchForm" method="post" action="#">
							<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
								<div class="form-group ">
									<label for="platform">设备平台</label>
									<select style="width: 120px" class="form-control chosen-select" name="platform" id="platform">
									</select>
								</div>
							</div>

							<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
								<div class="form-group ">
									<label for="pagetype">页面类型</label>
									<select style="width: 120px" class="form-control chosen-select" name="platform" id="pagetype">
									</select>
								</div>
							</div>

							<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
								<div class="form-group ">
									<label for="category">品类类别</label>
									<select style="width: 120px" class="form-control chosen-select" name="platform" id="category">
									</select>
								</div>
							</div>

							<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
								<div class="form-group ">
									<label for="statisticDateRange">选择时段</label>
									<input type="text" id="statisticDateRange" name="statisticDateRange" class="form-control" value="" style="width: auto"/>
								</div>
							</div>
							<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
								<div class="form-group ">
									<label class="sr-only"></label>
									<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding"><button type="button" class="btn btn-pink btn-sm" id="searchBtn" onclick="searchBtnClick()"><span class="ace-icon fa fa-search icon-on-right bigger-110"></span>查询</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="row" id="failuerTable">
			<div class="col-xs-12">
				<div class="widget-box">
					<div class="row">
						<div class="col-xs-12">
							<div style="width: 100%; margin: 0 auto;">
								<div class="form-group ">
									<div class="box box-primary">
										<div class="box-header with-border form-inline" >
											<h4 class="box-title" style="float: left"><span>&nbsp;&nbsp;&nbsp;数据概览</span>
											</h4>
										</div>
									</div>
								</div>
								<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
									<thead>
									<tr>
										<th style="text-align: left">总推荐次数</th>
										<th style="text-align: left">总点击数</th>
										<th style="text-align: left">点击率</th>
									</tr>
									</thead>
									<tbody id="gross">
									<tr>
										<td style="text-align: left">0</td>
										<td style="text-align: left">0</td>
										<td style="text-align: left">0.0%</td>
										<td style="text-align: left">0</td>
										<td style="text-align: left">0.0%</td>
										<td style="text-align: left">0</td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row" >
			<div class="col-xs-12">
				<div class="widget-box">
					<div class="row">
						<div class="col-xs-12">
							<div style="width: 100%; margin: 0 auto;">
								<section class="col-lg-12 connectedSortable" >
									<div class="box box-primary">
										<div class="box-header with-border" >
											<h4 class="box-title"><span>数据趋势</span>
											</h4>
										</div>
										<div class="box-body">
											<div id="trend"  style="height: 400px; cursor: pointer;"></div>
										</div>
									</div>
								</section>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row" >
			<div class="col-xs-12">
				<div class="widget-box">
					<div class="row">
						<div class="col-xs-12">
							<div style="width: 100%; margin: 0 auto;">
								<div class="form-group ">
									<div class="box box-primary">
										<div class="box-header with-border form-inline" >
											<h4 class="box-title" style="float: left"><span>&nbsp;&nbsp;&nbsp;明细指标</span>
												<i class="blue ace-icon fa fa-question-circle" style="color:#d6487e!important;"></i>
												<span class='tips' style="font-size:12px">最多导出数据2万<s></s></span>
											</h4>
											<a type="button" class="btn btn-pink btn-sm" id="export" style="float: right">
												<span class="ace-icon fa fa-download icon-on-right bigger-110"></span>
												导出CSV
											</a>
											<form action="${request.contextPath}/recommend/exportCSV" id="exportForm" method="post" hidden="true">
												<input id="startday" name="startday" type="text" hidden="true">
												<input id="endday" name="endday" type="text" hidden="true">
												<button type="submit" hidden="true" id="exportExcel" class="btn btn-primary" ></button>
											</form>
										</div>
									</div>
								</div>
								<table id="dynamic-table"
									   class="table table-striped table-bordered table-hover dataTable no-footer"
									   role="grid" aria-describedby="dynamic-table_info">
									<thead>
									<tr>
										<th style="text-align: left">日期</th>
										<th style="text-align: left">产品ID</th>
										<th style="text-align: left">产品名称</th>
										<th style="text-align: left">展位</th>
										<th style="text-align: left">BatchID</th>
										<th style="text-align: left">点击数</th>
										<th style="text-align: left">点击率</th>
										<th style="text-align: left">下单数</th>
										<th style="text-align: left">下单转化率</th>
										<th style="text-align: left">营业额(元)</th>
										<th style="text-align: left">客单价(元)</th>
									</tr>
									</thead>
									<tbody id="tbodyTable">
									<tr>
										<td colspan="12">
											<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">
												没有记录!
											</div>
										</td>
									</tr>
									</tbody>
								</table>
								<div class="ui-jqgrid1">
									<div id="grid-pager"
										 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
										 dir="ltr">
										<div id="pg_grid-pager" class="ui-pager-control" role="group">
											<input type="text" id="currentPage" hidden="true" value=1>
											<input type="text" id="page_size" value=10 hidden="true">
											<input type="text" id="page_total" hidden="true">
											<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table" style="width: 100%; table-layout: fixed; height: 100%;" role="row">
												<tbody>
												<tr>
													<td id="grid-pager_left" align="left"></td>
													<td id="grid-pager_center" align="center"
														style="white-space: pre; width: 800px;">
														<table cellspacing="0" cellpadding="0" border="0" style="table-layout: auto;" class="ui-pg-table">
															<tbody>
															<tr>
																<td id="first_grid-pager" onclick="showPage('firstPage')" class="ui-pg-button ui-corner-all " style="cursor: pointer;"><span class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																<td id="prev_grid-pager" onclick="showPage('prePage')" class="ui-pg-button ui-corner-all " style="cursor: pointer;"><span class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																<td dir="ltr">Page <input class="ui-pg-input" id="page_num" type="text" size="2" maxlength="7" disabled="true" value="" role="textbox"> of <span id="sp_1_grid-pager"></span></td>
																<td id="next_grid-pager" onclick="showPage('nextPage')" class="ui-pg-button ui-corner-all " style="cursor: pointer;"><span class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																<td id="last_grid-pager" onclick="showPage('lastPage')" class="ui-pg-button ui-corner-all " style="cursor: pointer;"><span class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
															</tr>
															</tbody>
														</table>
													</td>

													<td id="grid-pager_right" align="right">
														<div dir="ltr" style="text-align: right ;width: 300px;" class="ui-paging-info">View <span id="view_start_row"></span> - <span id="view_end_row"></span> of <span id="view_page_total"></span>
														</div>
													</td>
												</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="${request.contextPath}/assets/js/moment.min.js"></script>
<script src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
<script type="text/javascript" src="${request.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/bootstrap.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/echarts.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/china.js"></script>
<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        d3.select(self.frameElement).style("height", "1300px");
        //默认查昨日数据
        var startDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 8);
        var endDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24);

        //判断是不是查询条件已设置，如果已设置，使用查询条件中的时间段
        var statisticStartDate = "";
        var statisticEndDate = "";
        if (statisticStartDate) {
            startDate = statisticStartDate
        }
        if (statisticEndDate) {
            endDate = statisticEndDate
        }
        $('#statisticDateRange').daterangepicker({
                startDate: startDate,
                endDate: endDate,
                showDropdowns: true,
                showWeekNumbers: false,
                timePicker: false,
                timePicker12Hour: false,
                ranges: {
                    '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7日': [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
                },

                opens: 'right',
                //  buttonClasses : [ 'btn btn-default' ],
                applyClass: 'btn-small btn-pink blue',
                cancelClass: 'btn-small',
                locale: {
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    separator: ' 至 ',
                    format: 'YYYY-MM-DD',
                    customRangeLabel: '指定时间段',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            },
            function (start, end, label) {//格式化日期显示框
                $('#statisticDateRange').val(start.format('yyyy-MM-dd') + ' - ' + end.format('yyyy-MM-dd'));
            });
        var message = "";
        if (!isEmpty(message)) {
            showMsg(message);
        }

        //设置筛选条件
        $.ajax({
            url : "${request.contextPath}/recommend/condition",
            data : {
            },
            dataType : "json",
            success : function(data) {
                var category = data.category;
                var pagetype = data.pagetype;
                var platform = data.platform;

                function setSelect(d) {
                    var str  = "";
                    for( var i = 0 ; i<d.length ; i++){
                        if(d[i]=='全部'){
                            str +="<option value=''>"+d[i]+"</option>";
                        }else{
                            str +="<option value='"+d[i]+"'>"+d[i]+"</option>";
                        }
                    }
                    return str;
                }
                $("#platform").html();
                $("#platform").append(setSelect(platform));
                $("#pagetype").html();
                $("#pagetype").append(setSelect(pagetype));
                $("#category").html();
                $("#category").append(setSelect(category));
            }
        });
    });

</script>
<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
<script type="text/javascript">
    function showPage(param) {
        var endrow = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#page_size").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        }
        else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        }
        else if ('nextPage' == param) {
            if (currentPage == endrow) {
                currentPage = endrow;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = endrow;
        }
        if (flag == 0) {
            ajaxData(currentPage, pageSize);
        }
    }

    /**趋势**/
    function trendf(category_name,scene_type,moblie_flag) {
        var time = $("#statisticDateRange").val();
        var startday = time.split('至')[0].replace("-","").replace("-","").trim();
        var endday = time.split('至')[1].replace("-","").replace("-","").trim();
        trendCharts.showLoading({
            text:"加载中..."
        });
        $.ajax({
            url: '${request.contextPath}/recommend/trend',
            type: "GET",
            data: {
                category_name: category_name,
                scene_type: scene_type,
                moblie_flag: moblie_flag,
                startday: startday,
                endday: endday
            },
            dataType:"json",
            success: function (data) {
                trendCharts.hideLoading();
                trendCharts.clear();
                if(data.data.date != null){
                    trendCharts.setOption({
                        grid:{
                            left: '4%',
                            right: '3%'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:data.data.category
                        },
                        toolbox: {
                            show : false,
                            feature : {
                                mark : {show: true},
                                dataView : {readOnly:false},
                                magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']},
                                restore : {show: false},
                                saveAsImage : {show: false}
                            }
                        },
                        calculable : true,
                        dataZoom : {
                            show : true,
                            realtime : true,
                            start : 0,
                            end : 100
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : true,
                                data : data.data.date//日期
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : data.data.series
                    })
                }
            },
            error: function (data) {
            }
        });
    }
</script>
<script type="text/javascript">
    /**概览*/
    function gross(category_name,scene_type,moblie_flag){
        var time = $("#statisticDateRange").val();
        var startday = time.split('至')[0].replace("-","").replace("-","").trim();
        var endday = time.split('至')[1].replace("-","").replace("-","").trim();
        $.ajax({
            url: '${request.contextPath}/recommend/overview',
            type: "GET",
            data: {
                category_name: category_name,
                scene_type: scene_type,
                moblie_flag: moblie_flag,
                startday: startday,
                endday: endday
            },
            dataType:"json",
            success: function (data) {
                if(data.data != null){
                    $("#gross").html("");
                    var tr = "<tr>";
                    tr +="<td style=\"text-align: left\">"+data.data['totalRecommend']+"</td>";
                    tr +="<td style=\"text-align: left\">"+data.data['totalClick']+"</td>";
                    var clickRate = data.data['clickRate'] *100;
                    clickRate = new Number(clickRate).toFixed(5);
                    tr +="<td style=\"text-align: left\">"+clickRate+" %</td>";
                    var conversionRate = data.data['conversionRate'] * 100;
                    conversionRate = new Number(conversionRate).toFixed(5);
                    tr +="</tr>"
                    $("#gross").append(tr);
                }else {
                    $("#gross").html("");
                    var tr = "<tr>";
                    tr +="<td style=\"text-align: left\">"+"0</td>";
                    tr +="<td style=\"text-align: left\">"+"0</td>";
                    tr +="<td style=\"text-align: left\">"+"0.0 %</td>";
                    tr +="</tr>"
                    $("#gross").append(tr);
                }
            },
            error: function (data) {
            }
        });
    }
</script>

<script type="text/javascript">

    function ajaxData(currentPage, pageSize) {
        var category_name = $("#category").val();
        var scene_type = $("#pagetype").val();
        var moblie_flag = $("#platform").val();
        var time = $("#statisticDateRange").val();
        var startday = time.split('至')[0].replace("-","").replace("-","").trim();
        var endday = time.split('至')[1].replace("-","").replace("-","").trim();
        var _page = currentPage ? currentPage: $("#currentPage").val();
        var _pageSize = pageSize ? pageSize: $("#page_size").val();
        $.ajax({
            url: '${request.contextPath}/recommend/detail',
            type: "POST",
            data: {
                category_name: category_name,
                scene_type: scene_type,
                moblie_flag: moblie_flag,
                startday: startday,
                endday: endday,
                currentPage: _page,
                pageSize: _pageSize
            },
            dataType:"json",
            success: function (data) {
                var data = data.data;
                if (data.pages > 1) {
                    $("#page_total").val(data.pages);
                    $("#currentPage").val(data.pageNum);
                    $("#page_num").val(data.pageNum);
                    $("#sp_1_grid-pager")[0].innerText = data.pages;
                    $("#view_start_row")[0].innerText = data.startRow;
                    $("#view_end_row")[0].innerText = data.endRow;
                    $("#view_page_total")[0].innerText = data.total;
                    $(".ui-jqgrid1").show();
                } else {
                    $("#page_total").val(0);
                    $("#currentPage").val(0);
                    $("#page_num").val(0);
                    $("#sp_1_grid-pager")[0].innerText = 0;
                    $("#view_start_row")[0].innerText = 0;
                    $("#view_end_row")[0].innerText = 0;
                    $("#view_page_total")[0].innerText = 0;
                    $(".ui-jqgrid1").hide();
                }
                $("#tbodyTable").html("");//清空
                var list = data.list;
                if(list != null && list.length>0){
                    var trs = "";
                    for(var i = 0; i<list.length;i++){
                        var tr = "<tr>";
                        tr +="<td style='text-align: left'>"+list[i].dateDate+"</td>";//日期
                        tr +="<td style='text-align: left'>"+list[i].productId+"</td>";//产品id
                        var tempProductName = list[i].productName ? list[i].productName.substring(0,20):"";
                        var title = list[i].productName ? list[i].productName : "";
                        tr +="<td style='text-align: left' title='"+title+"'>"+tempProductName+"</td>";//产品名称
                        var booth = list[i].booth ? list[i].booth : 0;
                        tr +="<td style='text-align: left'>"+booth+"</td>";//展位
                        tr +="<td style='text-align: left'>"+list[i].batchId+"</td>";//批次
                        tr +="<td style='text-align: left'>"+list[i].clickNum+"</td>";//点击数
                        var clickRate = list[i].clickNum/list[i].recommendNum * 100;
                        clickRate = Number(clickRate).toFixed(2);
                        tr +="<td style='text-align: left'>"+clickRate+" %</td>";//点击率
                        var orderNum = list[i].orderNum ?list[i].orderNum :0;
                        tr +="<td style='text-align: left'>"+orderNum+"</td>";//下单数
                        var conversionRate = list[i].orderNum/list[i].recommendNum * 100;
                        conversionRate = Number(conversionRate).toFixed(2);
                        tr +="<td style='text-align: left'>"+conversionRate+" %</td>";//下单转换率
                        var turnover = list[i].turnover ? list[i].turnover : 0;
                        tr +="<td style='text-align: left'>"+turnover+"</td>";//营业额
                        var unitPrice = list[i].unitPrice ? list[i].unitPrice :0;
                        tr +="<td style='text-align: left'>"+unitPrice+"</td>";//客单价
                        tr+="</tr>";
                        trs +=tr;
                    }
                    $("#tbodyTable").append(trs);
                }else {
                    var nodataDiv = "<tr>";
                    nodataDiv += "<td colspan=\"12\">";
                    nodataDiv += "<div class=\"alert alert-danger\" style=\"margin-bottom: 0px;\" role=\"alert\">";
                    nodataDiv += "没有记录!";
                    nodataDiv += "</div></td></tr>";
                    $("#tbodyTable").append(nodataDiv);
                }
            },
            error: function (data) {
            }
        });
    }
</script>
<script type="text/javascript" >
    var trend = document.getElementById("trend");
    var trendCharts = echarts.init(trend,"light");
    optionV = {
        grid:{
            left: '4%',
            right: '3%'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[

            ]
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {readOnly:false},
                magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: false},
                saveAsImage : {show: false}
            }
        },
        calculable : true,
        dataZoom : {
            show : true,
            realtime : true,
            start : 0,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : []//日期
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
        ]
    };

    if (optionV && typeof optionV === "object") {
        trendCharts.setOption(optionV, true);
    }

</script>

<!-- 公共函数-->
<script type="text/javascript">
    /**
     * 点击查询
     */
    function searchBtnClick() {
        $("#currentPage").val(1);
        var category_name = $("#category").val();
        var scene_type = $("#pagetype").val();
        var moblie_flag = $("#platform").val();
        gross(category_name,scene_type,moblie_flag);
        trendf(category_name,scene_type,moblie_flag);
        ajaxData("","");
    }
    $("#export").on("click",function(){
        var time = $("#statisticDateRange").val();
        var startday = time.split('至')[0].replace("-","").replace("-","").trim();
        var endday = time.split('至')[1].replace("-","").replace("-","").trim();
        $("#startday").val(startday);
        $("#endday").val(endday);
        $("#exportExcel").click();
    });
    //页面加载完成后执行点击事件
    $(function(){
        $("#searchBtn").click();
    });
</script>
<script type="text/javascript">
</script>
</body>
</html>